<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title></title>
    <script src='./vue.global.js'></script>
</head>

<body>
    <div id='app'>
        <son :name="sonName"></son>
    </div>

    <script>
        const app = Vue.createApp({
            data() {
                return {
                    sonName: "李小刚",
                    friends: ["法外狂徒张三", "采花大盗李四", "隔壁王大爷"]
                }
            },

            /* 简单写法只适合传递静态数据 */
            // provide:{
            //     jiaxun:"不要对外人提及爹的姓名",
            // },

            /* 一旦全局透传的数据中有动态数据 则必须写成函数（后代用到的时候现调一下该函数） */
            provide() {
                return {
                    jiaxun: "不要对外人提及爹的姓名",
                    friendsLength: Vue.computed(() => this.friends.length)
                }
            },

            methods: {},
            // computed:{
            //     friendsLength(){
            //         return this.friends.length
            //     }
            // }
        })

        app.component("son", {
            props: ["name"],
            inject: ["jiaxun"],
            template: `
            <h3>哥是儿子{{name}}</h3>
            <p>李氏家训:{{jiaxun}}</p>
            <grandson></grandson>
            `
        })

        app.component("grandson", {
            /* 子孙组件声明获取祖代组件全局透传下来的数据 */
            inject: ["jiaxun", "friendsLength"],
            
            template: `
            <h3>哥是你孙子</h3>
            <p>孙子移山不止</p>
            <p>李氏家训:{{jiaxun}}</p>
            <p>friendsLength:{{friendsLength}}</p>
            `
        })
        app.mount('#app')
    </script>
</body>

</html>